<template>
    <div class="table">
        <div class="container">
            <div class="handle-box">
                <el-input v-model="select_word" placeholder="请输入标题" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                <el-button v-has="'notice_add'" type="primary" icon="el-icon-lx-add" @click="add">添加</el-button>
                <el-button v-has="'notice_delAll'" type="primary" icon="el-icon-delete" @click="delAll">批量删除</el-button>
                <el-button v-has="'notice_refresh'" type="primary" icon="el-icon-refresh" @click="refresh">刷新</el-button>
            </div>
            <ces-table ref="cestable"
                    :tableHeight='tableHeight'
                    :that='that'
                    size='small '
                    :isSelection='true'
                    :isIndex='true'
                    :isHandle='true'
                    :tableData='tableData'
                    :tableCols='tableCols'
                    :isPagination='true'
                    :tablePage='pagination'
                    @handleSelectionChange='handleSelectionChange'
                    @handleCurrentChange='handleCurrentChange'
                    @handleSizeChange="handleSizeChange"
            >
            </ces-table>
            <cesEdit :Visible="cesEditVisible"  :data="form" :titleName="titleName"></cesEdit>
        </div>
    </div>
</template>

<script>
    import cesTable from '../../../../views/common/Table'
    import cesEdit from './edit'

    export default {
        name: "demoTable",
        components : {
            cesTable,
            cesEdit
        },
        //弹出页面保存完数据后调用该页面的pages方法刷新列表数据
        provide(){
            return{
                refresh:this.refresh
            }
        },
        data () {
            return  {
                that : this,
                tableHeight: window.innerHeight  - 288,
                url_page: '/auth/notice/pages',
                url_delAll: '/auth/notice/delAll',
                url_del: '/auth/notice/delete',
                select_word: '',
                titleName:'',//动态设置弹框页面的标题
                cesEditVisible:false,
                multipleSelection: [],
                del_list: [],
                // 表头及字段
                tableCols: [
                    {label:'标题',prop:'notice_title'},
                    {label:'添加人',prop:'notice_person'},
                    {label:'添加时间',prop:'notice_time'},
                    {label:'内容',prop:'notice_content'},
                    {label:'操作',type:'Button',width:'120',
                        btnList:[
                        {type:'text',label:'编辑',icon:'el-icon-edit',vhas:'notice_edit',handle:(row,that)=>this.edit(row,that)},
                        {type:'text',label:'删除',icon:'el-icon-delete',vhas:'notice_del',handle:(row,that)=>this.delete(row,that)},
                        ]},
                ],
                tableData : [],//表格数据
                pagination : {
                    pageSize:10,pageNum:1,total:10
                },
                form: {
                    page:'1',//第几页
                    limit:'10'//每页条数，默认10条
                }
            }
        },
        created(){
            this.getPages();
        },
        methods : {
            //变更分页条数
            handleSizeChange(val) {
                console.log(val);
                this.form.limit=val;
                this.getPages();//根据用户获取的每页显示页面数量显示页面
            },
            //变更上一页下一页
            handleCurrentChange(val){
                console.log(val);
                this.form.page=val;
                this.getPages()
            },
            //选中table行
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //弹窗编辑完后刷新列表页面在子页面调用改方法
            refresh(){
                this.select_word='';
                this.form={};
                this.cesEditVisible = false;
                this.getPages();
            },
            // 获取分页数据
            getPages() {
                this.cesEditVisible = false;
                this.form.page=this.pagination.pageNum;
                this.form.limit=this.pagination.pageSize;
                this.form.title=this.select_word;
                this.$post(this.url_page,this.form).then(res => {
                    if(res.data){
                        this.tableData = res.data;
                        this.pagination.total = res.count;
                    }
                })
            },
            /*搜索查询*/
            search(){
                this.getPages();
            },
            //弹出添加页面
            add(){
                this.cesEditVisible=true;
                this.form={};//必须给form赋值，否则会报错
                this.titleName = '新增';//动态设置弹框页面的标题为新增
            },
            /*批量删除*/
            delAll() {
                const length = this.multipleSelection.length;
                let str = '';
                this.del_list = this.del_list.concat(this.multipleSelection);
                for (let i = 0; i < length; i++) {
                    str += this.multipleSelection[i].notice_pk + ',';
                }
                if(length > 0){
                    this.$confirm('确定要删除数据吗？','提示',{
                        confirmButtonText: '确定',cancleButtonText:'取消',type:'warning'
                    }).then(()=>{
                        this.$post(this.url_delAll,{notice_pks:str}).then(res => {
                            this.$message({
                                type :res.code,
                                message: res.msg,
                            });
                            this.refresh();
                        }).catch(() => {
                            this.refresh();
                        });
                    }).catch(() => {
                        this.refresh();
                    });
                }else{
                    this.$message({
                        type :"failed",
                        message:"请至少选择一条数据",
                    });
                }
            },
            //编辑
            edit(index, row) {
                this.cesEditVisible=true;
                this.titleName = '编辑';//动态设置弹框页面的标题为编辑
                this.form = {
                    notice_pk: row.notice_pk,
                    notice_content: row.notice_content,
                    notice_title: row.notice_title,
                    notice_time: row.notice_time,
                    notice_person: row.notice_person,
                    fk_user_pk: row.fk_user_pk,
                };
            },
            /*删除*/
            delete(index, row) {
                if(row.notice_pk != "" && row.notice_pk != null) {
                    this.$confirm('确定要删除数据吗？', '提示', {
                        confirmButtonText: '确定', cancleButtonText: '取消', type: 'warning'
                    }).then(() => {
                        this.$post(this.url_del,{notice_pk:row.notice_pk}).then(res => {
                            this.$message({
                                type: res.code,
                                message: res.msg,
                            });
                            this.getPages();
                        }).catch(() => {
                            this.refresh();
                        });
                    }).catch(() => {
                        this.refresh();
                    });
                }
            }
        },
        /*全页面监听回车查询事件*/
        mounted() {
            let _this = this
            document.onkeydown = function (e) {
                if (e.keyCode === 13) {
                    _this.search();
                }
            }
        }
    };
</script>

<style scoped>
    @import "../../../../assets/css/common.css";
</style>

